<template>
  <div class="container">
    <el-row>
      <el-col :span="12">
        <div class="grid-content bg-purple" style>
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>新签合同</span>
            </div>
            <template>
              <el-table :data="personalList.performance" style="width: 100%">
                <el-table-column prop="project" label="项目"></el-table-column>
                <el-table-column prop="head_user" label="负责人"></el-table-column>
                <el-table-column prop="number" label="个人所得绩效"></el-table-column>
              </el-table>
            </template>
          </el-card>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="grid-content bg-purple-light">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>当年到款</span>
            </div>
            <template>
              <el-table :data="personalList.achievement" style="width: 100%">
                <el-table-column prop="project" label="项目"></el-table-column>
                <el-table-column prop="head_user" label="负责人"></el-table-column>
                <el-table-column prop="number" label="个人所得绩效"></el-table-column>
              </el-table>
            </template>
          </el-card>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="grid-content bg-purple-light">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>论证编制</span>
            </div>
            <template>
              <el-table :data="personalList.argument" style="width: 100%">
                <el-table-column prop="project" label="项目"></el-table-column>
                <el-table-column prop="head_user" label="负责人"></el-table-column>
                <el-table-column prop="number" label="个人所得绩效"></el-table-column>
              </el-table>
            </template>
          </el-card>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="grid-content bg-purple-light">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>公共服务</span>
            </div>
            <datetemplate>
<<<<<<< HEAD
             <el-table :data="serviceArr" style="width: 100%">
=======
              <el-table :data="personalList.service" style="width: 100%">
>>>>>>> 5df05520407b3197a0742bfa6c9572d32c70b029
                <el-table-column prop="activity_num" label="活动参展"></el-table-column>
                <el-table-column prop="hangar_num" label="机库讲解"></el-table-column>
                <el-table-column prop="visual_design_num" label="视觉设计"></el-table-column>
                <el-table-column prop="service_num" label="综合服务"></el-table-column>
              </el-table>
            </datetemplate>
          </el-card>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="grid-content bg-purple-light">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>科研成果</span>
            </div>
            <template>
<<<<<<< HEAD
             <el-table :data="researchArr" style="width: 100%">
=======
              <el-table :data="personalList.research" style="width: 100%">
>>>>>>> 5df05520407b3197a0742bfa6c9572d32c70b029
                <el-table-column prop="paper_num" label="论文"></el-table-column>
                <el-table-column prop="patent_num" label="专利/软著"></el-table-column>
                <el-table-column prop="award_num" label="奖励"></el-table-column>
                <el-table-column prop="acceptance_num" label="结题验收"></el-table-column>
              </el-table>
            </template>
          </el-card>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <div class="grid-content bg-purple-light">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>项目内人员绩效</span>
            </div>
            <el-table :data="relatedList" style="width:calc(100% - 10px);margin:auto;">
              <el-table-column prop="user_id" label="用户编号"></el-table-column>
              <el-table-column prop="project" label=" 项目标题"></el-table-column>
              <el-table-column prop="username" label="姓名"></el-table-column>
              <el-table-column prop="performance" label="新签合同"></el-table-column>
              <el-table-column prop="achievement" label="当前到款"></el-table-column>
              <el-table-column prop="argument" label="论证编制"></el-table-column>
            </el-table>
          </el-card>
        </div>
      </el-col>
    </el-row>
  </div>

</template>

<script>
  import {getUserIndex} from "@/api/api";

  export default {
    data() {
      return {
        personalList: [],
        relatedList: [],
        params: {
          page: 1,
          size: 10,
        },
         researchArr:[],
        serviceArr:[],
      }
    },
    created() {
      this.getUserIndexFn()
    },
    methods: {
      async getUserIndexFn() {
        var data = await getUserIndex();
        console.log(data.data.data)
        console.log(data.data.data.personal.service)
        this.personalList = data.data.data.personal;
<<<<<<< HEAD
        this.relatedList = data.data.data.related;
         var searchJson = {};
        searchJson["acceptance_num"] =  this.personalList.research.acceptance_num
        searchJson["award_num"] =  this.personalList.research.award_num
        searchJson["paper_num"] =  this.personalList.research.paper_num
        searchJson["patent_num"] =  this.personalList.research.patent_num;
        this.researchArr.push(searchJson)
        var serviceJson = {};
        serviceJson["activity_num"] =  this.personalList.service.activity_num
        serviceJson["hangar_num"] =  this.personalList.service.hangar_num
        serviceJson["service_num"] =  this.personalList.service.service_num
        serviceJson["visual_design_num"] =  this.personalList.service.visual_design_num;
        this.serviceArr.push(serviceJson)
=======
        this.personalList.research = [data.data.data.personal.research]
        this.personalList.service = [data.data.data.personal.service]
        this.relatedList = data.data.data.related
>>>>>>> 5df05520407b3197a0742bfa6c9572d32c70b029
      }
    }
  };
</script>

<style lang="scss" scoped>
  .container {
    .grid-content {
      width: calc(100% - 10px);
      margin: auto;
      margin-top: 20px;
    }

    .el-card__body {
      padding: 5px;
    }
  }

  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }

  .clearfix:after {
    clear: both;
  }

  .box-card {
    width: 100%;
  }
</style>
